import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { NzSwitchModule } from 'ng-zorro-antd/switch';

@Component({
  selector: 'app-switch-remote',
  standalone: true,
  imports: [NzSwitchModule, FormsModule],
  template: `
    <div class="demo demo-space">
      <div>
        <nz-switch
          [(ngModel)]="success"
          nzCheckedChildren="成功"
          nzUnCheckedChildren="失败"
        ></nz-switch>
      </div>
      <nz-switch
        [(ngModel)]="value"
        (click)="setRemote()"
        [nzLoading]="loading"
        nzControl
      ></nz-switch>
    </div>
  `,
})
export class SwitchRemoteComponent {
  value = false;
  loading = false;
  success = false; // 模拟成功或失败

  setRemote() {
    this.loading = true;
    setTimeout(() => {
      console.log(this.value);

      this.loading = false;
      if (!this.success) {
        window.alert('修改失败！');
        return;
      } else {
        const remoteValue = !this.value;
        this.value = remoteValue;
      }
    }, 1000);
  }
}
